<!DOCTYPE html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>免费简洁响应式Bootstrap后台主题模板BootAdmin</title>
        <!-- Bootstrap -->
        <!-- 新 Bootstrap4 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <link href="/vendors/easypiechart/jquery.easy-pie-chart.css" rel="stylesheet" media="screen">
        <link href="/assets/styles.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="/layui/css/layui.css" media="all">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="/vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">手机phone 后台布局</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">控制台</a></li>
                <li class="layui-nav-item"><a href="">用户管理</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        管理员: syt
                    </a>
                </li>
                <li class="layui-nav-item"><a href="">退出登录</a></li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">基础手机信息</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">手机分类管理</a>
                    </li>
                    <li class="layui-nav-item"><a href="">SOC管理</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">基础手机信息表</div>
            <table id="demo" lay-filter="test"></table>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © syt.com - 底部固定区域
        </div>
            <!--修改的弹窗-->
            <div class="layui-form" id="div_pop_up" style="display: none">
                <div class="layui-form-item">
                    <label class="layui-form-label">手机Id:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="baseId" required lay-verify="required" placeholder="请输入id" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机名称:</label>
                    <div class="layui-input-block">
                        <input type="text" id="baseName" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机卖点:</label>
                    <div class="layui-input-block">
                        <input type="text" id="baseFeature" required  lay-verify="required" placeholder="请输入卖点" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="basePrice" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">介绍图:</label>
                    <div class="layui-input-block">
                        <img src="">
                        <input type="text" id="baseImage" required  lay-verify="required" placeholder="图片url" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详情页:</label>
                    <div class="layui-input-block">
                        <input type="text" id="baseRemarks" required  lay-verify="required" placeholder="请输入详情链接" autocomplete="off" class="layui-input">

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" id="base_edit_submit">保存</button>
                    </div>
                </div>
            </div>
    </div>
    <!--        <script src="/assets/scripts.js"></script>-->
        <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <script src="/layui/layui.all.js"></script>
        <!--右侧工具栏-->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script>
            var url = "http://syt.com:8001"
            //所有a标签带上了参数token
            var token = $.cookie('token')

            /**为了layui*/
            layui.use('table', function () {
            var table = layui.table

            //第一个实例 表格数据
            table.render({
                elem: '#demo'
                ,height: 600
                ,url: '/basePhone/list' //数据接口
                ,page: true //开启分页
                ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'baseId', title: 'ID', width:100, sort: true, fixed: 'left'}
                        ,{field: 'baseName', title: '名称', width:250}
                        ,{field: 'baseFeature', title: '卖点', width:250}
                        ,{field: 'basePrice', title: '价格', width:100, sort: true}
                        ,{field: 'baseImage', title: '图片地址', width: 200}
                        ,{field: 'baseRemarks', title: '详情链接', width: 80, sort: true}
                        ,{fixed: 'right', width: 265, align:'center', toolbar: '#barDemo'}
                    ]
                ]
            });

            //监听头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        // 启动增加的模态框
                        layer.msg('增加内容');
                        layer.open({
                            title: "增加基础信息",
                            type: 2,
                            area: ['600px', '450px'],
                            content: '/admin/base/edit'
                        })
                        // $("#div_pop_up").attr("style", "display: block")
                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            layer.msg('删除：' + data[0].baseId);
                            delete_list(data)
                        }
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'detail'){
                    layer.msg('查看操作' + data.baseId);
                } else if(layEvent === 'del'){
                    layer.confirm('真的删除行么' + data.baseId, function(index){
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url: "/basePhone/delete/" + data.baseId,
                            type: 'delete',
                            dataType: "json",
                            headers: {
                                'token': token
                            },
                            success: function (data) {
                                alert("删除成功" + data.msg)
                            },
                            error: function (data) {
                                alert("失败" + data.msg)
                            }
                        })
                    });
                } else if(layEvent === 'edit'){
                    layer.open({
                        title: '编辑基础数据',
                        type: 1,
                        area: ['650px', '550px'],
                        shade: 0,
                        content: $("#div_pop_up"),
                    });
                    base_edit(data)
                }
            });
        })

            // 修改数据前，先写入编辑框中的内容
            function base_edit(data) {
                $("#baseImage").attr("value", data.baseImage)
                $("#baseId").attr("value", data.baseId)
                $("#baseName").attr("value", data.baseName)
                $("#baseFeature").attr("value", data.baseFeature)
                $("#basePrice").attr("value", data.basePrice)
                $("#baseImage").siblings().attr("src", data.baseImage)
                $("#baseRemarks").attr("value", data.baseRemarks)
            }

            // 点击保存
            $("#base_edit_submit").click(function () {
                var data = {
                    baseId: $("#baseId").val(),
                    baseName: $("#baseName").val(),
                    baseFeature: $("#baseFeature").val(),
                    basePrice: $("#basePrice").val(),
                    baseImage: $("#baseImage").siblings().src,
                    baseRemarks: $("#baseRemarks").val()
                }
                var json = JSON.stringify(data)
                $.ajax({
                    url: '/basePhone/alter',
                    type: 'put',
                    data: json,
                    dataType: 'json',
                    headers: {
                        'Content-Type': 'application/json',
                        'token': token
                    },
                    success: function (data) {
                        alert("保存成功" + data.msg)
                    },
                    error: function (data) {
                        var data1 = JSON.stringify(data)
                        alert("失败！" + data1)
                    }
                })
            })
            
            
            //多选删除操作
            function delete_list(data) {

                for(var i = 0; i < data.size(); i++) {

                }
            }

        </script>
    </body>
</html>